<template>
	<div class="top">
		<div class="banner">
			<Banner :listData="listData"></Banner>
		</div>

		<div class="natice">
			<Notice :noticeList="noticeList"></Notice>
		</div>
	</div>
</template>

<script>
	import Banner from './components/Banner'
	import Notice from './components/Notice'
	import axios from 'axios'
	export default {
		name: 'BannerAndNotice',
		data() {
			return {
				listData: [],
				noticeList:[]
			};
		},
		mounted() {
			this.showImg();
			this.showNotice(1, 7);
		},
		methods: {
			showImg() {
				axios.get(this.$global_msg.userRoute + "/banner/showImg")
					.then(res => {
						this.listData = res.data.data
					})
			},
			showNotice(page, limit) {
				axios.get(this.$global_msg.userRoute + "/notice/showNotice", {
						params:{
							page: page,
							limit: limit
						}
					})
					.then(res => {
						this.noticeList = res.data.data
						// this.listData = res.data.data

					})
			}
		},
		components: {
			Banner,Notice
		}
	};
</script>

<style scoped="scoped">
	.top {
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 32px 0;
	}

	.banner {
		/* float: left;	 */
		width: 765px;
		height: 380px;
		overflow: hidden;
		position: relative;
		margin-right: 20px;
	}

	.natice {
		width: 435px;
		height: 380px;
		/* background-color: #2DB55D; */
		/* border-radius: 0 10px 10px 0; */
		border-radius: 10px;
	}
</style>
